<template>
    <div style="display: flex">
        <el-button type="primary" style="margin-right: 15px" @click="addItem">新增</el-button>
        <el-input v-model="search" placeholder="请输入消息标题"
            style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
        <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
        </el-button>
    </div>
    <el-table :data="tableData" :row-style="{ height: '77px' }" border
        style="width: calc(100vw - 240px);height: 75vh;margin-top: 20px;font-size: 15px;">
        <el-table-column align="center" prop="username" label="发布人" width="150" />
        <el-table-column align="center" prop="title" label="消息标题" width="200" show-overflow-tooltip />
        <el-table-column align="center" prop="content" label="消息内容" width="600" show-overflow-tooltip />
        <el-table-column align="center" prop="isSend" label="是否发布" width='120'>
            <template #default="scope">
                <el-tag type="warning" v-if="scope.row.isSend === 0">未发布</el-tag>
                <el-tag type="success" v-else-if="scope.row.isSend === 1">已发布</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="sendTime" label="发布时间" width="200" />
        <el-table-column align="center" prop="createTime" label="创建日期" width="200" />
        <el-table-column align="center" fixed="right" label="操作" width="200">
            <template v-slot="scope">
                <div>
                    <el-button :disabled="scope.row.isSend === 1" type="primary" size="small" icon="Edit"
                        @click="editItem(scope.row)">编辑
                    </el-button>
                    <el-button type="warning" size="small" icon="View" @click="viewItem(scope.row)">查看
                    </el-button>
                </div>
                <div>
                    <el-button :disabled="scope.row.isSend === 1" type="success" size="small" icon="Edit"
                        @click="sendAnnounce(scope.row.id)">发布
                    </el-button>
                    <el-button :disabled="scope.row.isSend === 1" type="danger" size="small" icon="Delete"
                        @click="deleteItem(scope.row.id)">删除
                    </el-button>
                </div>
                <div>
                    <el-button type="success" size="small" icon="View" @click="getRecAnnounceLog(scope.row.id)">
                        接收记录
                    </el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <!--      分页-->
    <div style="margin-top: 10px">
        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" :background="true"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <el-dialog v-model="dialogVisible" title="消息操作" width="500" @close="resetForm('form')">
        <el-form label-position="top" :inline="true" :model="form" ref="form" :rules="rules">
            <el-form-item label="消息标题" autocomplete="off" style="width: 100%" prop="title">
                <el-input v-model="form.title" placeholder="请输入消息标题" clearable />
            </el-form-item>
            <el-form-item label="消息内容" autocomplete="off" style="width: 100%" prop="content">
                <el-input type="textarea" v-model="form.content" :rows="8" placeholder="请输入消息内容" clearable>
                </el-input>
            </el-form-item>
        </el-form>
        <template v-if="isView === false" #footer>
            <div class="dialog-footer">
                <el-button @click="resetForm('form')">取消</el-button>
                <el-button type="primary" @click="submitForm('form')">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="sendDialogVisible" title="发布消息" width="500" align-center @close="resetUsers('receiveUsers')">
        <el-form label-position="top" :inline="true" :model="receiveUsers" ref="receiveUsers" :rules="rules">
            <el-form-item label="班级" autocomplete="off" style="width: 100%">
                <el-select v-model="receiveUsers.classIds" multiple filterable clearable placeholder="请选择班级"
                    style="width: 100%">
                    <el-option v-for="item in classOptions" :key="item.id" :label="item.trainClassNum"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="个人" autocomplete="off" style="width: 100%">
                <el-select v-model="receiveUsers.userIds" multiple clearable filterable placeholder="请选择个人"
                    style="width: 100%">
                    <el-option v-for="item in userOptions" :key="item.id" :label="item.username" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="resetUsers('receiveUsers')">取消</el-button>
                <el-button type="primary" @click="submitUsers('receiveUsers')">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="消息查看" v-model="isView" width="700">
        <div style="font-weight: bold;font-size: 20px">通知标题</div>
        <div style="margin-top: 10px">
            {{ this.form.title }}
        </div>
        <div style="margin-top: 20px;font-weight: bold;font-size: 20px">通知内容</div>
        <div style="margin-top: 10px">
            {{ this.form.content }}
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="resetForm('form')">取消</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="接收记录" v-model="logDialogVisible" width="600" @close="logReset()">
        <el-table :data="recAnnounceLogs" :row-style="{ height: '30px' }" border
                  style="width: calc(100vw - 240px);height: 440px;margin-top: 20px;font-size: 15px;">
            <el-table-column prop="username" label="用户名" align="center" width="auto"/>
            <el-table-column prop="telephone" label="手机号" align="center" width="auto"/>
            <el-table-column align="center" prop="state" label="是否接收" width='150'>
                <template #default="scope">
                    <el-tag type="warning" v-if="scope.row.state === '0'">未读</el-tag>
                    <el-tag type="success" v-else-if="scope.row.state === '1'">已读</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <div class="demo-pagination-block" style="margin-top: 10px">
            <el-pagination :current-page="logCurrentPage" :page-size="logPageSize" :page-sizes="[10, 20, 30, 50]"
                           layout="total, sizes, prev, pager, next, jumper" :total="recAnnounceLogTotal" :background="true"
                           @size-change="handleLogSizeChange" @current-change="handleLogCurrentChange"/>
        </div>
    </el-dialog>
</template>


<script>
import { ref } from 'vue'
import request from "~/utils/request.js";

export default {
    data() {
        return {
            dialogVisible: false,
            sendDialogVisible: false,
            isView: false,
            tableData: [],
            classOptions: [],
            userOptions: [],
            form: {},
            receiveUsers: {
                sendAnnounceId: '',
                classIds: [],
                userIds: []
            },
            search: "",
            currentPage: 1,
            pageSize: 10,
            total: 0,
            rules: {
                title: [
                    { required: true, message: '请输入消息标题', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请输入消息内容', trigger: 'blur' },
                ]
            },
            logDialogVisible: false,
            announceId: '',
            recAnnounceLogs: [],
            recAnnounceLogTotal: 0,
            logCurrentPage: 1,
            logPageSize: 10,
        }
    },
    async created() {
        await this.getClassOptions()
        await this.getUserOptions()
        await this.load()
    },
    methods: {
        async load() {
            request.get("/send-announce/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&title=" + this.search).then(res => {
                if (res.code === '200') {
                    for (let key in res.data) {
                        if (key === "records") {
                            this.tableData = res.data[key];
                        } else if (key === "total") {
                            this.total = res.data[key];
                        }
                    }
                } else {
                    ElMessage.error("错误" + res.msg)
                }
            })
        },
        async getUserOptions() {
            request.get("/user/all?").then(res => {
                this.userOptions = res.data
            })
        },
        async getClassOptions() {
            request.get("/train-class/all").then(res => {
                this.classOptions = res.data
            })
        },
        viewItem(item) {
            Object.assign(this.form, item)
            this.isView = true
        },
        editItem(item) {
            Object.assign(this.form, item)
            this.dialogVisible = true
        },
        addItem() {
            this.dialogVisible = true;
        },
        sendAnnounce(val) {
            this.receiveUsers.sendAnnounceId = val
            this.sendDialogVisible = true
        },
        // 删除
        deleteItem(scope) {
            this.$confirm('是否确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.get("/send-announce/delete/" + scope).then(res => {
                    if (res.code === '200') {
                        this.$message.success("成功")
                        this.load()
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            });
        },
        // 提交
        submitForm(val) {
            this.form.userId = this.$store.state.user.id
            this.form.isSend = 0
            this.$refs[val].validate((valid) => {
                if (valid) {
                    request.post("/send-announce/edit", this.form).then(res => {
                        if (res.code === '200') {
                            this.$message({
                                message: "成功",
                                type: "success"
                            })
                            this.load()
                            this.resetForm(val)
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            })
        },
        // 取消
        resetForm(val) {
            this.isView = false;
            this.dialogVisible = false;
            this.form = {};
            this.$refs[val].resetFields();
        },
        submitUsers(val) {
            this.$refs[val].validate((valid) => {
                if (valid) {
                    request.post("/receive-announce/editAll", this.receiveUsers).then(res => {
                        if (res.code === '200') {
                            this.$message({
                                message: "成功",
                                type: "success"
                            })
                            this.load()
                            this.resetUsers(val)
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            })
        },
        resetUsers(val) {
            this.sendDialogVisible = false;
            this.receiveUsers = {};
            this.$refs[val].resetFields();
        },
        handleCurrentChange(item) {
            // 改变当前页码触发
            this.currentPage = item
            this.load()
        },
        handleSizeChange(item) {   // 改变当前每页的个数触发
            this.pageSize = item
            this.load()
        },

        getRecAnnounceLog(item) {
            this.announceId = item
            request.get("/receive-announce/getRecAnnounceById?pageNum=" + this.logCurrentPage + "&pageSize=" + this.logPageSize + "&announceId=" + item).then(res => {
                if (res.code === '200') {
                    this.recAnnounceLogs = res.data.records
                    this.recAnnounceLogTotal = res.data.total
                    this.logDialogVisible = true
                } else {
                    ElMessage.error("错误" + res.msg)
                }
            })
        },
        handleLogCurrentChange(item) {
            this.logCurrentPage = item
            this.getRecAnnounceLog(this.announceId)
        },
        handleLogSizeChange(item) {
            this.logPageSize = item
            this.getRecAnnounceLog(this.announceId)
        },
        logReset() {
            this.logDialogVisible = false
            this.announceId = ""
            this.recAnnounceLogs = []
            this.recAnnounceLogTotal = 0
            this.logCurrentPage = 1
            this.logPageSize = 10
        },
    }
}

</script>

<style></style>
